const video = document.querySelector('.viewer')
const progress = document.querySelector('.progress')
const progress_range = document.querySelector('.progress_range')
const btn_voice = document.querySelector('.voice')
const input_voice = document.querySelector('.video_voice')
const span_voice = document.querySelector('.voice_num')
const player = document.querySelector('.player')
const play_controls = document.querySelector('.play_controls')
const btn_play = document.querySelector('.play')

const btn_skips = document.querySelectorAll('[data-skip]')

function toggleVideo() {
    const method = video.paused ? 'play' : 'pause'
    video[method]()
}

function updateButton() {
    const icon = this.paused ? '►' : '❚❚'
    btn_play.textContent = icon
}

function changeVoice() {
    const voice_value = parseInt(this.value * 100)
    span_voice.innerHTML = voice_value
    span_voice.style = 'block'
    video['volume'] = this.value
}

function handleProgress() {
    const percent = (video.currentTime / video.duration) * 100
    progress_range.style.flexBasis = `${percent}%`
}

function handleSkip() {
    video.currentTime += parseInt(this.dataset.skip)
}

function updateProgress(e) {
    /* console.log(e.offsetX)
    console.log(progress.offsetWidth) */
    const currentTime = (e.offsetX / progress.offsetWidth) * video.duration
    video.currentTime = currentTime
}

//控制声音input框显示与隐藏
btn_voice.addEventListener('click', () => {
    if (input_voice.style.display == 'none')
        input_voice.style.display = 'inline-block'
    else {
        input_voice.style.display = 'none'
        span_voice.style.display = 'none'
    }
})
//调节声音input
input_voice.addEventListener('change', changeVoice)
input_voice.addEventListener('mousemove', changeVoice)
//播放暂停
btn_play.addEventListener('click', toggleVideo)
video.addEventListener('click', toggleVideo)
video.addEventListener('play', updateButton)
video.addEventListener('pause', updateButton)
//当进度条改变时
video.addEventListener('timeupdate', handleProgress)
//快进和后退时
btn_skips.forEach(skip => skip.addEventListener('click', handleSkip))
//模拟hover
player.addEventListener('mouseenter', () => {
    play_controls.style.transform = `translateY(0)`
})
player.addEventListener('mouseleave', () => {
    play_controls.style.transform = `translateY(100%)`
    input_voice.style.display = 'none'
    span_voice.style.display = 'none'
})
//点击进度条
progress.addEventListener('click', updateProgress)
//拖拽进度条
let mousedown = false;
progress.addEventListener('mousemove', (e) => {
    mousedown && updateProgress(e)
})
progress.addEventListener('mousedown', () => {
    mousedown = true
})
progress.addEventListener('mouseup', () => {
    mousedown = false
})

/* //当发生了transition事件时
play_controls.addEventListener('transitionend', () => {
    console.log(play_controls.style.transform)
}) */
//页面载入时需要做的一些设置
window.onload = () => {
    input_voice.style.display = 'none'
    span_voice.style.display = 'none'
    progress_range.style.flexBasis = '0%'
    play_controls.style.transform = `translateY(100%)`
}